<template>
  <div
      class="user-management-page"
      v-loading="loading"
      element-loading-text="拼命加载中"
  >
        <el-space wrap style="width: 100%">
          <el-input
              v-model="conditionForm.name"
              class="search-input"
              prefix-icon="el-icon-search"
              size="small"
              placeholder="司机姓名"
              clearable
              style="width: 200px"
          ></el-input>
          <el-input
              v-model="conditionForm.licenseNumber"
              class="search-input"
              prefix-icon="el-icon-search"
              size="small"
              placeholder="驾驶证号"
              clearable
              style="width: 200px"
          ></el-input>

          <el-button
              type="primary"
              size="small"
              icon="el-icon-circle-plus-outline"
              @click="onTableCondition"
          >查询
          </el-button
          >
          <el-button
              type="primary"
              size="small"
              icon="el-icon-circle-plus-outline"
              @click="onTableAddClick"
          >添加
          </el-button
          >
          <el-button
              type="danger"
              size="small"
              icon="el-icon-delete"
              @click="onTopDeleteClick"
          >删除
          </el-button
          >
        </el-space>


    <!-- 添加/编辑权限的模态框 -->
    <el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="600px" center>
      <el-form :model="form" label-width="80px" center>

        <el-form-item label="司机名字">
          <el-input v-model="form.name"/>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="form.phone"/>
        </el-form-item>
        <el-form-item label="驾驶证号">
          <el-input v-model="form.licenseNumber"/>
        </el-form-item>
        <el-form-item label="司机状态">
          <el-select v-model="form.driverStatus" placeholder="请选择车辆状态" >
            <el-option label="工作中" value="working"/>
            <el-option label="空闲状态" value="available"/>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
            <span class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取消</el-button>
              <el-button type="primary" @click="addOrUpdateADriver">确定</el-button>
            </span>
      </template>
    </el-dialog>

    <!--    表格-->
    <el-table
        :data="dataForTable"
        tooltip-effect="dark"
        :row-style="{ height: '65px' }"
        @selection-change="onTableSelectionChange"
    >
      <el-table-column
          type="selection"
          width="50"
          show-overflow-tooltip
          header-align="center"
          align="center"
      >
      </el-table-column>
      <el-table-column prop="name" label="司机姓名" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="phone" label="联系电话" show-overflow-tooltip>
      </el-table-column>W
      <el-table-column prop="licenseNumber" label="驾驶证号" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="driverStatus" label="司机状态" show-overflow-tooltip>
        <template #default="scope">
          <el-tag v-if="scope.row.driverStatus ==='working' " type="success"
                  @click="changTheStatus(scope.row)"
          >{{scope.row.driverStatus}}</el-tag>
          <el-tag v-if="scope.row.driverStatus ==='available' " type="warning"
                  @click="changTheStatus(scope.row)"
          >{{scope.row.driverStatus}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="driverType" label="分属类型" show-overflow-tooltip>
        <template #default="scope">
          <el-tag type="success" v-if="scope.row.driverType=== 'our'">{{"本公司司机"}}</el-tag>
          <el-tag type="warning" v-if="scope.row.driverType === 'other'">{{"外部司机"}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          label="操作"
          show-overflow-tooltip
          min-width="95"
          fixed="right"
      >
        <template #default="scope">
          <el-button
              type="warning"
              size="small"
              @click="onTableEditClick(scope.row)"
          >编辑
          </el-button>
          <el-button
              type="danger"
              size="small"
              @click="onTableDeleteClick(scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
      <template v-slot:empty> 暂无数据</template>
    </el-table>
    <div class="table-pager">
      <el-pagination
          size="small"
          background
          layout="prev, pager, next"
          :total="50"
          class="mt-4"
      />
    </div>
  </div>
</template>
<script>
import axios from "axios";
import {reactive, onMounted, ref, watch, computed} from "vue";
import { ElMessage } from 'element-plus'

export default {
  name: "driver-management",
  setup(){
    const dataForTable = ref ([]);
    const loading = ref(true)
    const form = ref({
      id: "",
      name: "",
      phone: "",
      licenseNumber: "",
      driverStatus: "",
    });
    const emptyForm = ref({
      id: "",
      name: "",
      phone: "",
      licenseNumber: "",
      driverStatus: "",
    });
    const conditionForm = ref({
      name : "",
      licenseNumber: "",
    });
    const nullConditionForm = ref({
      name : "",
      licenseNumber: "",
    });
    const dialogTitle = ref("")
    const dialogFormVisible = ref(false)


    // 函数分界线----------------------------------------
    async function findAll() {
      loading.value = true;
      const res = await axios({
        url: "/vehicle/driver/findAll",
        method: "post",
      });
      console.log(res.data.data);
      dataForTable.value = res.data.data;
      console.log(dataForTable.value)
      loading.value = false;
    }

    async function onTableCondition() {
      const res = await axios({
        url: "/vehicle/driver/findByCondition",
        method: "post",
        data: {
          "name": conditionForm.value.name,
          "licenseNumber": conditionForm.value.licenseNumber,
        }
      })
      console.log(res.data)
      dataForTable.value = res.data.data;
      conditionForm.value = nullConditionForm.value;
    }

    function addOrUpdateADriver(row) {
      if (dialogTitle.value === "新增司机") {
        addADriver();
        dialogTitle.value = "";
        form.value = emptyForm.value;
        dialogFormVisible.value = false;
      } else if (dialogTitle.value === "修改司机") {
        updateADriver(row);
        dialogTitle.value = "";
        form.value = emptyForm.value;
        dialogFormVisible.value = false;
      }
    }
    async function updateADriver(row) {
      console.log(row.value)
      const res = await axios({
        url: "/vehicle/driver/updateAMsg",
        method: "post",
        data: {
          "driver": {
            "id": form.value.id,
            "name": form.value.name,
            "phone": form.value.phone,
            "licenseNumber": form.value.licenseNumber,
            "driverStatus": form.value.driverStatus,
          }
        }
      });
      console.log(res.data);
    }
    async function addADriver() {
      console.log("add")
      const res = await axios({
        url: "/vehicle/driver/insertAMsg",
        method: "post",
        data: {
          "driver" : form.value
        }
      });
      console.log(res);
      asyncToFindAll();
    }

    function onTableEditClick(row) {
      dialogTitle.value = "修改司机"
      dialogFormVisible.value = true;
      form.value = row;
    }

    function onTableDeleteClick(row) {
      const res = axios({
        url: "/vehicle/driver/deleteById/" + row.id,
        method:"get"
      });
      asyncToFindAll();
    }

    async function changTheStatus(row){
      console.log(row)
      const res = await axios({
        url:"/vehicle/driver/fixTheDriveStatus/" + row.id,
        method:"get",
      });
      ElMessage({
        message: '司机'+row.name +'状态修改成功',
        type: 'success',
      })
      setTimeout(asyncToFindAll, 500);
    }

    function asyncToFindAll() {
      findAll();
    }


    findAll();
    //返回值分界线-------------------------------------
    return{
      dataForTable,
      form,
      emptyForm,
      conditionForm,
      nullConditionForm,
      dialogTitle,
      dialogFormVisible,

      findAll,
      onTableCondition,
      addOrUpdateADriver,
      addADriver,
      updateADriver,
      asyncToFindAll,
      onTableEditClick,
      onTableDeleteClick,
      changTheStatus,
    }
  }
}
</script>
<style lang="scss" scoped>
.user-management-page {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  background: #fff;
  overflow: auto;
  position: relative;

  .table-pager {
    width: 100%;
    @include flex-row-center-center;
    padding: 20px 0;
    box-sizing: border-box;
  }
}
</style>